<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报修进度跟踪</title>
    <!-- Bootstrap 5 简洁版 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4e73df;
            --success: #1cc88a;
            --warning: #f6c23e;
            --danger: #e74a3b;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .progress-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 100px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
        }

        .progress-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .progress-header h3 {
            color: var(--primary);
            font-weight: 600;
        }

        .progress-track {
            position: relative;
            height: 6px;
            background: #e3e6f0;
            border-radius: 3px;
            margin: 40px 0;
        }

        .progress-bar {
            height: 100%;
            background: var(--success);
            border-radius: 3px;
            transition: width 0.5s ease;
        }

        .progress-step {
            position: absolute;
            width: 24px;
            height: 24px;
            background: white;
            border: 4px solid #e3e6f0;
            border-radius: 50%;
            top: -11px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
            z-index: 2;
        }

        .progress-step.completed {
            border-color: var(--success);
            background: var(--success);
            color: white;
        }

        .progress-step.active {
            border-color: var(--primary);
            color: var(--primary);
            animation: pulse 1.5s infinite;
        }

        .progress-label {
            position: absolute;
            top: -40px;
            width: 100px;
            left: -38px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }

        .progress-time {
            position: absolute;
            bottom: -30px;
            width: 100px;
            left: -38px;
            text-align: center;
            font-size: 12px;
            color: #999;
        }

        .progress-info {
            margin-top: 50px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
<div class="progress-container">
    <div class="progress-header">
        <h3>报修进度跟踪</h3>
        <p class="text-muted">单号: <%=request.getParameter("orderId")%> | 房号: <%=request.getParameter("roomNumber")%></p>
    </div>

    <!-- 进度条 -->
    <!-- 在head标签内添加script -->
    <script>
    // 获取URL参数
    function getUrlParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }
    
    // 根据状态计算进度百分比
    function getProgressWidth(status) {
        switch(status) {
            case '已提交': return 25;
            case '待处理': return 50;
            case '处理中': return 75;
            case '已完成': return 100;
            default: return 0;
        }
    }
    
    // 初始化进度条
    function initProgress() {
        const status = getUrlParam('status') || '待处理';
        const progressWidth = getProgressWidth(status);
        
        // 更新进度条宽度
        document.querySelector('.progress-bar').style.width = progressWidth + '%';
        
        // 更新步骤状态
        document.querySelectorAll('.progress-step').forEach(step => {
            const stepStatus = step.getAttribute('data-status');
            step.classList.remove('active', 'completed');
            console.log(status, stepStatus)
            if (stepStatus === status) {
                step.classList.add('active');
            } else if (
                (status === '已完成') || 
                (status === '处理中' && stepStatus !== '处理中') ||
                (status === '已受理' && stepStatus === '已提交')
            ) {
                step.classList.add('completed');
            }
        });
    }
    </script>
    
    <!-- 修改进度条部分 -->
    <div class="progress-track">
        <div class="progress-bar"></div>
    
        <!-- 步骤1 -->
        <div class="progress-step" data-status="已提交" style="left: 0%">
            <i class="fas fa-circle"></i>
            <div class="progress-label">已提交</div>
            <% if (request.getParameter("createdAt") == null ||request.getParameter("createdAt").isEmpty()|| "undefined".equals(request.getParameter("createdAt"))) { %>
            <div class="progress-time">--·--</div>
            <% }else{ %>
            <div class="progress-time"><%=request.getParameter("createdAt")%></div>
            <% } %>
        </div>
    
        <!-- 步骤2 -->
        <div class="progress-step" data-status="待处理" style="left: 33%">
            <i class="fas fa-circle"></i>
            <div class="progress-label">已受理</div>
            <% if (request.getParameter("createdAt") == null ||request.getParameter("createdAt").isEmpty()|| "undefined".equals(request.getParameter("createdAt"))) { %>
                <div class="progress-time">--·--</div>
            <% }else{ %>
                <div class="progress-time"><%=request.getParameter("createdAt")%></div>
            <% } %>
        </div>
    
        <!-- 步骤3 -->
        <div class="progress-step" data-status="处理中" style="left: 66%">
            <i class="fas fa-circle"></i>
            <div class="progress-label">处理中</div>
            <% if (request.getParameter("processAt") == null || request.getParameter("processAt").isEmpty()|| "undefined".equals(request.getParameter("processAt"))) { %>
                <div class="progress-time">--·--</div>
            <% }else{ %>
                <div class="progress-time"><%=request.getParameter("processAt")%></div>
            <% } %>
        </div>
    
        <!-- 步骤4 -->
        <div class="progress-step" data-status="已完成" style="left: 100%">
            <i class="fas fa-circle"></i>
            <div class="progress-label">已完成</div>
            <% if (request.getParameter("completedAt") == null || request.getParameter("completedAt").isEmpty()|| "undefined".equals(request.getParameter("completedAt"))) { %>
                <div class="progress-time">--·--</div>
            <% }else{ %>
                <div class="progress-time"><%=request.getParameter("completedAt")%></div>
            <% } %>
        </div>
    </div>

    <!-- 在body标签末尾添加初始化脚本 -->
    <script>
    // 页面加载完成后初始化进度条
    document.addEventListener('DOMContentLoaded', initProgress);
    </script>

    <!-- 进度详情 -->
    <div class="progress-info">
        <h5 class="mb-3">当前状态: <span class="text-primary"><% 
            String status = request.getParameter("status");
            if ("已完成".equals(status)) { 
            %>
                已完成
            <% } else if ("处理中".equals(status)) { %>
                正在处理
            <% } else { %>
                <%=request.getParameter("description")%>
            <% } %></span></h5>
        <div class="timeline">
            <div class="timeline-item">
                <strong><%=request.getParameter("createdAt")%></strong>
                <p class="mb-1">维修人员已上门检查，确认是<%=request.getParameter("description")%>，需要更换配件。</p>
                <p class="text-muted small mb-0">维修人员: 李师傅 (13800138001)</p>
            </div>
            <div class="timeline-item">
                <strong><%=request.getParameter("createdAt")%></strong>
                <p class="mb-1">后勤处已受理报修，分配维修人员。</p>
            </div>
            <div class="timeline-item">
                <strong><%=request.getParameter("processAt")%></strong>
                <p class="mb-0">报修申请已提交，等待处理。</p>
            </div>
        </div>
    </div>
</div>

<!-- Font Awesome 图标库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</html>